<template>
  <zm-view>
    <zm-navbar title="登录" :border-bottom="false" background="transparent"></zm-navbar>
    <view slot="fixed" class="absolute-bg"></view>
    <view class="content-wrap">
      <image class="logo" src="../../../static/logo.png" mode="aspectFill"></image>
      <text class="text-999 mb-28">未注册的手机号将自动注册并登录</text>
      <zm-button open-type="getPhoneNumber" width="600rpx" height="100rpx" font-size="32rpx" size="large" round @getphonenumber="handleGetphonenumber"> 登录 </zm-button>
      <view class="mt-45">
        <zm-checkbox v-model="isAgreest" icon-size="28rpx" round>
          <view class="checkbox-text">
            <text> 我已认证阅读、理解并同意 </text>
            <text class="text-theme" @click.stop="handleToUserAt">《{{ baseInfo.priSubject || manifest.name }}用户协议》</text>
            <text class="text-theme" @click.stop="handleToUserPyAt">《{{ baseInfo.priSubject || manifest.name }}隐私协议》</text>
          </view>
        </zm-checkbox>
      </view>
    </view>
    <zm-dialog ref="dialog" title="阅读并同意以下协议" @confirm="isAgreest = true">
      <text>为了保证您的个人信息安全，使用登录 功能需要先阅读并同意</text>
      <text class="text-theme" @click.stop="handleToUserAt">《{{ baseInfo.priSubject || manifest.name }}用户协议》</text>
      <text class="text-theme" @click.stop="handleToUserPyAt">《{{ baseInfo.priSubject || manifest.name }}隐私协议》</text>
    </zm-dialog>
  </zm-view>
</template>

<script>
import page from "@/mixins/page"
import hook from "@/mixins/hook"
import manifest from "@/manifest.json"
import { mapActions, mapGetters } from "vuex"
export default {
  mixins: [page, hook],
  data() {
    return {
      manifest,
      code: "",
      isAgreest: false
    }
  },
  computed: {
    ...mapGetters(["baseInfo"])
  },
  onLoad() {
    this.handleGetCode()
    this.isAgreest = uni.$getCache("isAgreest") || false
  },
  methods: {
    ...mapActions(["getUserInfo"]),
    handleGetphonenumber({ detail }) {
      if (this.isAgreest) {
        if (detail.iv) {
          const data = JSON.stringify({
            code: this.code,
            payload: { iv: detail.iv, encryptedData: detail.encryptedData }
          })
          uni.$api.public.bindMobileByWeiXin({ data }).then(() => {
            this.getUserInfo()
            uni.showToast({
              icon: "success",
              title: "恭喜您，绑定成功",
              mask: true
            })
            setTimeout(() => uni.navigateBack(), 1500)
          })
        }
      } else {
        this.$refs.dialog.open({
          showCancelButton: true,
          cancelButtonText: "不同意",
          confirmButtonText: "已阅读并同意"
        })
      }
    },
    // 跳转用户协议
    handleToUserAt() {
      this.toView({
        url: "pages/person/user-agreement/user-agreement",
        params: {
          type: "userAt",
          title: `${this.baseInfo.priSubject || this.manifest.name}用户协议`
        }
      })
    },
    // 跳转用户隐私协议
    handleToUserPyAt() {
      this.toView({
        url: "pages/person/user-agreement/user-agreement",
        params: {
          type: "userPyAt",
          title: `${this.baseInfo.priSubject || this.manifest.name}隐私协议`
        }
      })
    },
    handleGetCode() {
      // #ifdef MP-WEIXIN
      uni.login({
        provider: "weixin",
        success: (res) => {
          this.code = res.code
        }
      })
      // #endif
    }
  }
}
</script>

<style lang="scss" scoped>
.absolute-bg {
  width: 100%;
  height: 100vh;
  background: linear-gradient(136deg, #fbf8f5 10%, #f5ecd8 23%, #f5ecd8 36%, #fbf8f5 53%);
}

.content-wrap {
  height: 100%;
  display: flex;
  z-index: 10;
  padding: 0 75rpx;
  position: relative;
  padding-top: 240rpx;
  align-items: center;
  flex-direction: column;
}

.logo {
  width: 206rpx;
  height: 206rpx;
  position: relative;
  margin-bottom: 155rpx;
}

.checkbox-text {
  flex-shrink: 1;
  line-height: 1.5;
}
::v-deep .u-checkbox {
  flex-shrink: unset;
}
</style>
